// mGrid 组件 定义 列数的 样式函数
gird-column-ctrl(num)
  if num <=3
    width 33.333333%
  if num ==4
    width 25%
  if num >=5
    width 20%

// 此文件为 stylus 的 函数

thin-border-bottom($color)
  position relative
  //border-bottom 1px solid $color
  &:before
    content ""
    position absolute
    bottom 0
    left 0
    right 0
    height 1px
    border-bottom 1px solid $color
    transform-origin 0 100%
    transform scaleY(0.5)


/*
bg-image($url)
  background-image: url($url + "@2x.png")
  @media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image url($url + "@3x.png")
*/

// 不换行
no-wrap()
  text-overflow: ellipsis
  overflow: hidden
  white-space: nowrap

multiline-hide(num)
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow : hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: num;
  -webkit-box-orient: vertical;


// 拓展点击区域的 css 方法: 用伪类 绝对定位 扩大 他的 点击区域
extend-click()
  position:relative
  &:before
    content ''
    position absolute
    top -10px
    left -10px
    right -10px
    bottom -10px

// 有header 的 自路由 全屏页面样式
sub-page-head()
  position:absolute; // 必须为 绝对定位
  z-index:1;    // 必须设置 z-index  此两个 属性用于 处理 -webkit-overflow-scrolling: touch 的副作用
  top 0rem // 顶部bar
  padding-top 0.8rem  // header的位置
  bottom 0.98rem
  width 100%
  max-width 10rem
  overflow auto
  background white
  font-size 0.32rem
  -webkit-overflow-scrolling: touch;

//无header 的 自路由 全屏页面样式
sub-page()
  position:absolute; // 必须为 绝对定位
  z-index:1;
  top 0rem // 顶部bar
  bottom 0.98rem
  width 100%
  max-width 10rem
  overflow auto
  background white
  font-size 0.32rem
  -webkit-overflow-scrolling: touch;
  
// 三角形
triangle(color,width,orient)
  width 0px
  height 0px
  border-right width solid color
  border-left 0px solid transparent
  border-top width solid transparent
  borer-bottom width solid transparent
  if orient == 'down'
    transform rotate(45deg)
  if orient == 'top'
    transform rotate(-135deg)
  if orient == 'left'
    transform rotate(-45deg)
  if orient == 'right'
    transform rotate(-225deg) 

// 棋盘背景    
checker-bg(lc,dc,size)
  background  lc
  background-image linear-gradient(45deg, dc 25%, transparent 0), 
                   linear-gradient(45deg, transparent 75%, dc 0%), 
                   linear-gradient(45deg, dc 25%, transparent 0),
                   linear-gradient(45deg, transparent 75%, dc 0)
  background-position 0 0, size size, size size, size*2 size*2
  background-size size*2 size*2
// 波点样式
polka($size, $radial, $bgc, $bc)
  background repeat
  background-color $bgc
  background-image radial-gradient($bc $radial, transparent 0),
                   radial-gradient($bc $radial, transparent 0);
  background-size $size $size;
  background-position 0 0, $size*0.5 $size*0.5;
// 折角样式
foled-tr-corner($color, $size, $angle)
  $x = $size / sin($angle)
  $y = $size / cos($angle)
  position relative
  background $color
  background linear-gradient($angle - 180deg, transparent $size, $color 0)
  &::before
    content ''
    position absolute
    top 0
    right 0
    background linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.5)) 100% 0 no-repeat
    width $y
    height $x
    transform: translateY($y - $x) rotate(2*$angle - 90deg)
    transform-origin bottom right
    border-bottom-left-radius inherit
    box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.2)

foled-tl-corner($color, $size, $angle)
  $x = $size / sin($angle)
  $y = $size / cos($angle)
  position relative
  background $color
  background linear-gradient(180deg - $angle, transparent $size, $color 0)
  &::before
    content ''
    position absolute
    top 0
    left 0
    width $y
    height $x
    background linear-gradient(to right bottom, transparent 50%, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.5)) 100% 0 no-repeat
    transform-origin bottom left
    transform: translateY($y - $x) rotate(90deg - 2*$angle)
    border-bottom-right-radius inherit
    box-shadow: 0.2em 0.2em 0.3em -0.1em rgba(0,0,0,.2)
foled-bl-corner($color, $size, $angle)
  $x = $size / sin($angle)
  $y = $size / cos($angle)
  position relative
  background $color
  background linear-gradient($angle, transparent $size, $color 0)
  &::before
    content ''
    position absolute
    bottom 0
    left 0
    width $x
    height $y
    background linear-gradient(to left top, transparent 50%, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.5)) 100% 0 no-repeat
    transform-origin top left
    transform: rotate(2*$angle) translateY(-1*$y) 
    border-top-left-radius inherit
    box-shadow: -0.2em -0.2em 0.3em -0.1em rgba(0,0,0,.2)
foled-br-corner($color, $size, $angle)
  $x = $size / sin($angle)
  $y = $size / cos($angle)
  position relative
  background $color
  background linear-gradient(360deg - $angle, transparent $size, $color 0)
  &::before
    content ''
    position absolute
    bottom 0
    right 0
    width $x
    height $y
    background linear-gradient(to right top, transparent 50%, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.5)) 100% 0 no-repeat
    transform-origin center center 
    transform: rotate(-2*$angle)  
    border-top-right-radius inherit
    box-shadow: 0.2em *-0.2em 0.3em -0.1em rgba(0,0,0,.2) 
    
// 当有n个元素时的选择器
// when-items-has($n)
//   &:first-child:nth-last-child($n),
//   &:first-child:nth-last-child($n) ~ &
//     @content

// 给页面添加相应滚动条滚动的内容进度条（使用要点：内容容器必须满屏高度）
page-top-process($color, $bgc = white)
  position relative
  background: no-repeat
  background-image: linear-gradient(to right top, $color 50%, $bgc 50%)
  background-size: 100% calc(100% - 100vh + 20px);
  z-index 1
  &:before
    content: ''
    position fixed
    width 100%
    top 5px
    bottom 0
    background $bgc;
    z-index -1

// stylus 生成一个区间内的随机数
random(min,max)
  return floor(math(0, 'random')*(max - min + 1) + min)